.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #333;
}

.section {
    margin-bottom: 40px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.section h2 {
    font-size: 24px;
    color: #c45666;
    margin-bottom: 15px;
}

.section p {
    font-size: 16px;
    line-height: 1.6;
}

.recommendations-container {
    margin-top: 20px;
    text-align: left; /* 确保左对齐 */
}

/* 今日推荐标题样式 */
.recommendations-header {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #b22222; /* 红色字体 */
}

/*!* 横向排列的 sort *!*/
/*.recommendations {*/
/*    display: flex;*/
/*    gap: 20px; !* 分类之间的间距 *!*/
/*    padding-left: 10px; !* 左侧留白对齐标题 *!*/
/*}*/
/* 推荐区域的整体样式 */
.recommendations {
    width: 100%; /* 推荐区域占满父容器 */
    padding: 20px; /* 推荐区域的内边距 */
    background-color: #f5f5f5; /* 背景色 */
    border-radius: 8px; /* 圆角 */
}

/* 每个分类的样式 */
.recommendation-item {
    position: relative;
    display: inline-block;
    text-align: center;
}

/* 分类标题样式 */
.sort-title {
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 5px 10px;
}

.sort-title:hover {
    color: #007bff; /* 鼠标悬停变色 */
}

/* 隐藏的 classes 列表 */
.classes-list {
    display: none;
    position: absolute;
    top: 30px; /* 距离 sort 的垂直距离 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 20px;
    z-index: 10;
    white-space: nowrap; /* 防止换行 */
    text-align: center;
}

/* classes 列表中的链接样式 */
.classes-list a {
    margin: 0 10px; /* 横向排列间距 */
    text-decoration: none;
    color: #333;
    font-size: 16px;
    transition: color 0.3s ease;
}

.classes-list a:hover {
    color: #007bff; /* 悬停变色 */
}

/* 鼠标悬停显示 classes 列表 */
.recommendation-item:hover .classes-list,
.recommendation-item .classes-list:hover {
    display: block;
}

.btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #c45666;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
}

.btn:hover {
    background-color: #a23c4f;
}

.progress-chart img {
    max-width: 100%;
    height: auto;
}

.plan-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.plan-card ul {
    list-style: none;
    padding: 0;
}

.plan-card ul li {
    margin: 10px 0;
}

.target-btn {
    position: absolute;
    right: 20px; /* 右侧偏移量 */
    bottom: 20px; /* 底部偏移量 */
    display: inline-block;
    padding: 8px 16px;
    background-color: #c45666;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.target-btn:hover {
    background-color: #a23c4f; /* 鼠标悬停颜色 */
}

/* 调整 section target 的相对定位以支持按钮定位 */
.section.target {
    position: relative;
    padding-bottom: 50px; /* 给底部留出按钮位置 */
}

 /*detail 样式 */
.detail {
    width: 100%;
    height: 800px;
    overflow-y: auto; /* 添加垂直滚动条 */
    margin: 20px auto; /* 居中显示 */
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.detail li {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 每个列表项 li */
.detail li a{
    display: flex; /* 让子元素水平排列 */
    height: 178px; /* 固定高度 */
    align-items: center; /* 垂直居中 */
    gap: 15px; /* 左右间距 */
    margin-bottom: 20px; /* 每个项目的间距 */
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 左侧图片区域 */
.detail li .left_R {
    flex: 1; /* 图片区域占 1/4 宽度 */
    align-items: center; /* 确保图片在容器中垂直居中 */
    justify-content: center;
    height: 100%;
}

.detail li .left_R img {
    width: auto; /* 图片宽度占满左侧区域 */
    height: 80%; /* 让图片高度自动填充 */
    border-radius: 6px;
}

/* 右侧文字区域 */
.detail li .right_R {
    flex: 3; /* 文字区域占 3/4 宽度 */
    height: 100%;
    /*display: flex;*/
    flex-direction: column; /* 文字垂直排列 */
    /*justify-content: space-between; !* 让文字均匀分布 *!*/
    padding: 5px 0;
}

/* 标题 */
.detail li .right_R h4 {
    margin-top: 1px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* 描述 */
.detail li .desc {
    font-size: 20px;
    color: #666;
    flex-grow: 1; /* 让描述文字填充剩余空间 */
}

/* 发布时间 */
.detail li .info {
    font-size: 12px;
    color: #999;
    margin-top: 50px;
}



/* 底部提示 */
.detail .bottom_info {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #999;
    font-style: italic;
}
